<template>
  <div class="app-container">
    <el-form label-width="120px">
      <el-form-item label="联系人姓名">
        <el-input v-model="linkman.linkmanName" />
      </el-form-item>
      <el-form-item label="联系人电话">
        <el-input v-model="linkman.linkmanPhone" />
      </el-form-item>

      <el-form-item label="所属供应商">
          <el-select   @focus="getOptions()"  @change="updateForm(linkman.supplierName)" v-model="linkman.supplierName"  placeholder="请选择" >
            <el-option
              v-for="item in options"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            ></el-option>
          </el-select>
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="addOrUpdate"
        >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import linkman from "@/api/linkman/linkman";
  import ImageCropper from "@/components/ImageCropper";
  import PanThumb from "@/components/PanThumb";
  export default {
    components: { ImageCropper, PanThumb },
    data() {
      return {
        linkman: {
          linkmanName: "",
          linkmanPhone: "",
          supplierId: 0,
          supplierName: ""
        },
        options: null

      };
    },
    created() {
      // 在页面渲染之前执行
      this.init();
    },
    watch: {
      // 监听路由变化
      $route(to, from) {
        console.log("watch $route");
        // 路由发生变化，执行该方法
        this.init();
      }
    },
    methods: {
      init() {
        console.log("created");
        // 因为讲师添加和修改调用的是同意界面，所以是否需要数据回显，需要在界面渲染之前进行判断
        // 判断路径中是否有id值，如果有id值，做数据回显
        if (this.$route.params && this.$route.params.id) {
          const id = this.$route.params.id;
          this.getLinkmanInfo(id);
        } else {
          // 如果没有id值，清空界面回显的数据，用于手动点击路由切换的时候
          this.linkman = {};
        }
      },
      addOrUpdate() {
        // 调用方法后，保存按钮禁用
        this.saveBtnDisabled = true;
        // 由于修改功能和保存功能用的同意界面，且使用同一按钮，所以需要判断是保存还是修改
        if (!this.linkman.id) {
          this.addLinkman();
        } else {
          this.updateLinkman();
        }
      },
      // 修改
      updateLinkman() {
        linkman.updateLinkman(this.linkman).then(response => {
          this.$message({
            // 提示信息
            type: "success",
            message: "修改成功!"
          });
          this.$router.push({ path: "/linkman/list" });
        });
      },
      // 添加
      addLinkman() {
        linkman
          .addLinkman(this.linkman)
          .then(response => {
            // 添加成功
            this.$message({
              // 提示信息
              type: "success",
              message: "保存成功!"
            });
          })
          .then(resposne => {
            //回到列表界面，路由跳转
            this.$router.push({ path: "/linkman/list" });
          });
      },
      // 根据id查询供应商联系人信息
      getLinkmanInfo(id) {
        linkman.getLinkmanById(id).then(response => {
          this.linkman = response.data
        });
      },
      // 选择框中的值变化时，动态改变表单对象中id的变化
      getOptions() {
        linkman.getSupplierOptions().then(response => {
          this.options = response.data
          console.log(this.options)

        })
          .catch(error => {
            // 请求失败
            console.log(error);
          });
      },
      // 选择框中的值变化时，动态改变表单中的supplierId
      updateForm(supplierName) {

        let obj = {};
        obj = this.options.find((item)=>{ //这里的carslist就是上面遍历的数据源
          return item.name === supplierName;//筛选出匹配数据
        });
        console.log("选中的Options",obj); //obj即是选中的Option数据集合
        //获取到选中的Option数据集并进行其它操作

        this.linkman.supplierId = obj.id
      }
    }
  };
</script>
